<template>
  <div id="NavApp" class="tricolor_nav_main_blue">
    <div class="tricolor_nav">
      <div class="nav_left">
        <span class="date">{{ navDate }}</span>
        <span class="date">{{ navWeekDay }}</span>
        <span class="date">{{ navTime }}</span>
      </div>
      <div class="nav_center">首页</div>
      <div class="nav_right">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MainNav",
  components: {},
  props: {},
  data() {
    return {
      navDate: "",
      navWeekDay: "",
      navTime: ""
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.skinEdition()
    this.getTime()
  },
  
  methods: {
    // 换肤效果
    skinEdition(){
      this.$watch("$store.state.SkinEdition", function(newValue, oldValue) {
        if(newValue=="default"){
          document.getElementById('NavApp').setAttribute('class', 'tricolor_nav_main_blue');
        }else{
          document.getElementById('NavApp').setAttribute('class', 'tricolor_nav_main_green');
        }
      },
      {
        immediate: true
      });
    },

    handleCommand(item){
      this.$store.commit('changeSkin', item);
    },

    // 获取实时时间
    getTime() {
      const date = new Date(); // 创建日期对象
      const week = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      let year = date.getFullYear(); // 获取年份
      let month = date.getMonth() + 1; // 获取月份是从0开始的，所以要+1 (它返回给定Date对象的Month。月是一个整数值，范围从0到11。零(0)表示一月，1表示二月，依此类推，直到11表示十二月。)
      let day = date.getDate(); // 获取日期
      let hour = date.getHours(); // 获取小时
      let min = date.getMinutes(); // 获取分钟
      let sec = date.getSeconds(); // 获取秒
      // date.getMilliseconds() 获取毫秒  一般用不上

      // 三元实现补0操作
      month = month > 9 ? month : `0${month}`;
      day = day > 9 ? day : `0${day}`;
      hour = hour > 9 ? hour : `0${hour}`;
      min = min > 9 ? min : `0${min}`;
      sec = sec > 9 ? sec : `0${sec}`;

      this.navDate = `${year}年${month}月${day}日`; // 日期
      this.navWeekDay = week[date.getDay()]; // 星期  // date.getDay() 获取星期 从0开始 0就是星期日 1是星期1
      this.navTime = `${hour}:${min}:${sec}`; // 时分秒时间
      window.requestAnimationFrame(this.getTime); // requestAnimationFrame 采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
    },
  },
};
</script>


<style lang="less" scoped>
@import './styles/mainNav.less';
// .skin_peeler {
//   margin-right: 15px;
//   .el-dropdown-link{
//     color: #fff;
//     cursor: pointer;
//   }
//   .el-dropdown{
//     font-size: 16px;
//   }
// }
// .head_edition {
//   margin-right: 15px;

// }
// .tricolor_nav_main{
//   width: 100%;
//   height: 56px;
//   position: relative;
// }
// .tricolor_nav{
//   width: 100%;
//   height: 72px;
//   position: fixed;
//   left: 0;
//   top: 0;
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   background-color: v-bind(color);
//   z-index: 19;
// }
// .date {
//   color: #fff;
//   margin-left: 20px;
// }
// .nav_left{
//   display: flex;
//   align-items: center;
//   padding-left: 17px;
//   box-sizing: border-box;
//   .left_line{
//     width: 2px;
//     height: 16px;
//     margin: 0 8px;
//     background-color: #0286FC;
//   }
// }
// .nav_center{
//   position: absolute;
//   top: 50%;
//   left: 50%;
//   transform: translate(-50%, -50%);
//   font-size: 40px;
//   color: #fff;
//   font-family: "阿里汉仪智能黑体";
// }
// .nav_right{
//   display: flex;
//   align-items: center;
//   color: #fff;
//   .right_line{
//     // width: 2px;
//     // height: 16px;
//     // background-color: #0286FC;
//     // margin: 0 8px;
//   }

//   .head_portrait{
//     width: 25px;
//     height: 25px;
//     border-radius: 50%;
//     overflow: hidden;
//     background-color: #fff;
//   }
//   .user_info{
//     margin: 0 26px 0 8px;
//   }
//   img{
//     margin-right: 16px;
//     cursor: pointer;
//   }
// }
</style>